<template>
	<view class="login">
		<!-- <cover-image src="/static/haihuidai/bg.png"></cover-image> -->
		<view class="content">
			<!-- 			<view class="logo" :style="{marginTop:height +50 +'px'}">
				<image src="/static/haihuidai/logo.png" mode="widthFix"></image>
			</view> -->
			<view class="login-form">
				<view class="logo" :style="{marginTop:height +50 +'px'}">
					<image src="/static/haihuidai/logo.png" mode="widthFix"></image>
				</view>
				<view class="item phone">
					<image class="icon left" src="/static/haihuidai/icon_phone.png" mode="widthFix"></image>
					<input class="uni-input" focus placeholder="用户名" placeholder-class="input-placeholder"
						v-model="loginFrom.username" />
					<image class="icon right" src="/static/haihuidai/icon_phone_right.png" mode="widthFix"
						@click="clearNameInput"></image>
				</view>
				<view class="item phone">
					<image class="icon left" src="/static/haihuidai/icon_pwd.png" mode="widthFix"></image>
					<input class="uni-input" placeholder="密码" placeholder-class="input-placeholder" :type="type"
						v-model="loginFrom.password" />
					<image class="icon right" src="/static/haihuidai/icon_pwd_right.png" mode="widthFix"
						@click="toggleType"></image>
				</view>
				<view class="btn" @click="login">
					<text>登录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from "../../components/uni-icon/uni-icons.vue"
	export default {
		data() {
			return {
				type: 'password',
				loginFrom: {
					username: 'hbjt_bt',
					password: 'hbjt_bt',
				},
				height: ''
			}
		},
		onLoad() {
			let _this = this
			uni.getSystemInfo({
				success: function(data) {
					// 将其赋值给this
					_this.height = data.statusBarHeight;
				}
			})
		},
		components: {
			uniIcons
		},
		methods: {

			// 点击登录按钮
			async login() {
				let username = this.loginFrom.username
				let password = this.loginFrom.password
				const obj = {
					username,
					password,
					client_id: 'ecs',
					client_secret: 'ecs123',
					grant_type: 'password',
				}
				uni.request({
					url: 'http://106.15.2.249:60000/bdmp/public/auth/token',
					method: "POST",
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					data: obj,
					success: (res) => {
						const {
							data,
							code,
							msg
						} = res.data
						if (code === '200') {
							let token = data.access_token
							uni.setStorageSync('token', token)
							uni.navigateTo({
								url: '/pages/index/index'
							});
						}
					}
				})
			},
			// 点击按钮切换密码框状态
			toggleType() {
				if (this.type === 'password') {
					this.type = 'input'
				} else {
					this.type = 'password'
				}
			},
			// 点击清空用户名表单
			clearNameInput() {
				this.loginFrom.username = ''
			}
		}
	}
</script>

<style scoped>
	.login {
		height: 100%;
		background-color: #007AFF;
	}

	.content {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
	}

	.logo {
		text-align: center;
		margin: 96rpx auto 73rpx auto;
	}

	.logo image {
		width: 50%;
	}

	.login-form {
		top: 10%;
		position: absolute;
		width: calc(100% - 20px);
		left: 50%;
		transform: translateX(-50%);
	}

	.login-form .item {
		width: 100%;
		height: 84rpx;
		border-radius: 6rpx;
		margin-bottom: 33rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #4781e6;
	}

	.login-form .uni-input {
		color: #fff;
		width: 460rpx;
		height: 84rpx;
		line-height: 84rpx;
	}

	.login-form .item .icon {
		width: 36rpx;
		height: 40rpx;
	}

	.input-placeholder {
		color: #fff;
		line-height: 84rpx;
		height: 84rpx;
		margin: auto;
	}

	.login-form .btn {
		margin: 43rpx auto 22rpx auto;
		text-align: center;
		height: 84rpx;
		line-height: 84rpx;
		border-radius: 6rpx;
		background-color: #6ea0f8;
	}

	.forgot-pwd {
		text-align: right;
	}

	.login-third .text {
		margin: 40rpx auto 40rpx auto;
		text-align: center;
	}

	.login-third .flex {
		text-align: center;
		display: flex;
		justify-content: space-around;
	}

	.login-third .flex image {
		width: 50rpx;
		height: 50rpx;
	}

	text {
		height: 30rpx;
		font-family: PingFang-SC-Regular;
		font-size: 32rpx;
		font-weight: bold;
		font-stretch: normal;
		line-height: 40rpx;
		letter-spacing: 3rpx;
		color: #ffffff;
	}
</style>
